<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<title>加入团队</title>
		<style>
			body {
				font-family: 'Arial', sans-serif;
				margin: 0;
				padding: 0;
				background-color: #f0f4f8;
				color: #333;
			}

			h1 {
				text-align: center;
				color: #007bff;
				margin: 20px 0;
				font-size: 2.5em;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
			}

			form {
				max-width: 600px;
				margin: auto;
				background: white;
				padding: 30px;
				border-radius: 10px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s;
			}

			form:hover {
				transform: scale(1.02);
			}

			label {
				display: block;
				margin: 15px 0 5px;
				font-weight: bold;
				color: #555;
			}

			input[type="text"],
			input[type="email"],
			textarea,
			select {
				width: 100%;
				padding: 12px;
				margin-bottom: 15px;
				border: 1px solid #ccc;
				border-radius: 5px;
				transition: border-color 0.3s;
			}

			input[type="text"]:focus,
			input[type="email"]:focus,
			textarea:focus,
			select:focus {
				border-color: #007bff;
				outline: none;
			}

			.checkbox-group {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-bottom: 15px;
				background-color: #e9ecef;
				padding: 10px;
				border-radius: 5px;
			}

			.checkbox-group label {
				margin: 5px 0;
				font-weight: normal;
				flex: 1 1 30%;
				/* 每个复选框占据30%的宽度 */
			}

			.honors-container {
				border: 1px solid #007bff;
				/* 边框颜色 */
				border-radius: 5px;
				padding: 10px;
				background-color: #f8f9fa;
				/* 背景颜色 */
				margin-bottom: 15px;
				text-align: center;
				/* 文本居中 */
			}

			.preview {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 10px;
			}

			.preview img {
				width: 100px;
				/* 设置预览图片大小 */
				height: 100px;
				/* 设置预览图片大小 */
				object-fit: cover;
				border: 1px solid #ccc;
				border-radius: 5px;
				position: relative;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			}

			.delete-btn {
				position: absolute;
				top: 2px;
				right: 2px;
				background-color: rgba(255, 0, 0, 0.8);
				/* 半透明红色 */
				color: white;
				border: none;
				border-radius: 50%;
				cursor: pointer;
				width: 24px;
				/* 增加按钮大小 */
				height: 24px;
				/* 增加按钮大小 */
				font-size: 16px;
				/* 增加字体大小 */
				line-height: 24px;
				/* 垂直居中 */
				display: flex;
				align-items: center;
				justify-content: center;
				transition: background-color 0.3s;
				/* 添加过渡效果 */
			}

			.delete-btn:hover {
				background-color: red;
				/* 鼠标悬停时变为不透明红色 */
			}

			.add-btn {
				width: 100px;
				height: 100px;
				border: 2px dashed #007bff;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				font-size: 24px;
				color: #007bff;
				transition: background-color 0.3s;
			}

			.add-btn:hover {
				background-color: rgba(0, 123, 255, 0.1);
			}

			.note {
				font-size: 14px;
				color: #555;
				margin-top: 5px;
			}

			button {
				background-color: #007bff;
				color: white;
				padding: 12px 15px;
				border: none;
				border-radius: 5px;
				cursor: pointer;
				width: 100%;
				font-size: 1.1em;
				transition: background-color 0.3s;
			}

			button:hover {
				background-color: #0056b3;
			}

			.back-btn {
				background-color: #28a745;
				/* 绿色背景 */
				color: white;
				padding: 10px 15px;
				border: none;
				border-radius: 5px;
				cursor: pointer;
				margin-bottom: 15px;
				display: block;
				text-align: center;
				width: 100%;
				font-size: 1em;
				transition: background-color 0.3s, transform 0.3s;
			}

			.back-btn:hover {
				background-color: #218838;
				/* 深绿色 */
				transform: scale(1.05);
				/* 悬停时放大 */
			}

			@media (max-width: 600px) {
				form {
					padding: 20px;
				}

				h1 {
					font-size: 2em;
				}
			}
		</style>
	</head>

	<body>

		<h1>欢迎加入团队</h1>
		<button class="back-btn" onclick="window.history.back();">返回上一个页面</button>
		<form id="teamForm">
			<label for="introduction">我的介绍:</label>
			<textarea id="introduction" name="introduction" rows="4" placeholder="输入你的介绍"></textarea>

			<label for="name">我的姓名:</label>
			<input type="text" id="name" name="name" placeholder="输入你的姓名" required>

			<label for="contactMethod">联系方式:</label>
			<input type="text" id="contactMethod" name="contactMethod" placeholder="输入你的联系方式" required>

			<label for="email">邮箱:</label>
			<input type="email" id="email" name="email" placeholder="输入你的邮箱" required>

			<label>技能方向:</label>
			<div class="checkbox-group">
				<label><input type="checkbox" name="skills" value="前端开发"> 前端开发</label>
				<label><input type="checkbox" name="skills" value="后端开发"> 后端开发</label>
				<label><input type="checkbox" name="skills" value="AI"> AI</label>
				<label><input type="checkbox" name="skills" value="计算机基础"> 计算机基础</label>
				<label><input type="checkbox" name="skills" value="移动开发"> 移动开发</label>
				<label><input type="checkbox" name="skills" value="运维&测试"> 运维&测试</label>
				<label><input type="checkbox" name="skills" value="数据库"> 数据库</label>
				<label><input type="checkbox" name="skills" value="产品设计"> 产品设计</label>
				<label><input type="checkbox" name="skills" value="嵌入式开发"> 嵌入式开发</label>
				<label><input type="checkbox" name="skills" value="职场软技能"> 职场软技能</label>
				<label><input type="checkbox" name="skills" value="产品经理"> 产品经理</label>
				<label><input type="checkbox" name="skills" value="游戏"> 游戏</label>
				<label><input type="checkbox" name="skills" value="求职面试"> 求职面试</label>
				<label><input type="checkbox" name="skills" value="其他"> 其他</label>
			</div>

			<label for="experience">工作年限:</label>
			<select id="experience" name="experience" required>
				<option value="1-3年">1-3年</option>
				<option value="3-5年">3-5年</option>
				<option value="5年以上">5年以上</option>
			</select>

			<label for="honorImages">上传荣誉图片:</label>
			<div class="honors-container">
				<div class="preview" id="imagePreview"></div>
				<div class="add-btn" id="addImageBtn">+</div>
				<div class="note">可一次选择多张照片</div>
			</div>

			<input type="file" id="honorImages" name="honorImages" accept="image/*" multiple style="display: none;">

			<button type="button" id="submitBtn">提交</button> <!-- 将提交按钮改为普通按钮 -->
		</form>

		<script>
			$(document).ready(function() {
				const fileInput = $('#honorImages');
				const imagePreview = $('#imagePreview');
				const addImageBtn = $('#addImageBtn');
				const submitBtn = $('#submitBtn');

				// 点击加号按钮触发文件选择
				addImageBtn.on('click', function() {
					fileInput.trigger('click');
				});

				// 使用jQuery的方式绑定change事件
				fileInput.on('change', function() {
					const files = this.files;

					$.each(files, function(i, file) {
						const reader = new FileReader();

						reader.onload = function(e) {
							const imgContainer = $('<div>').css('position', 'relative');
							const img = $('<img>').attr('src', e.target.result);

							const deleteBtn = $('<button>').addClass('delete-btn').text('×');
							deleteBtn.on('click', function() {
								imgContainer.remove();
							});

							imgContainer.append(img).append(deleteBtn);
							imagePreview.append(imgContainer);
						}

						reader.readAsDataURL(file);
					});
				});

				// 点击提交按钮时处理数据
				submitBtn.on('click', function() {
					const formData = new FormData();
					// 添加其他表单数据到FormData对象
					formData.append('method', 'add');
					
					formData.append('introduce', $('#introduction').val());
					
					formData.append('tname', $('#name').val());
					
					formData.append('phone', $('#contactMethod').val());
					
					formData.append('email', $('#email').val());
					formData.append('workyears', '3');
					formData.append('direction', $('input[name="skills"]:checked').map(function() {
						return $(this).val();
					}).get().join(',')); // 将数组转为逗号分隔的字符串，可根据后端要求调整格式

					// 获取文件列表并添加到FormData对象中
					const files = fileInput[0].files;
					if (files.length > 0) {
						for (let i = 0; i < files.length; i++) {
							formData.append('pictureurl', files[i]); // 'honorImages'可根据后端要求修改键名
						}
					}

					// 使用for...of循环遍历并输出formData内容
					for (const [key, value] of formData) {
						console.log(key + ": " + value);
					}
					// 发送 AJAX 请求
					$.ajax({
						type: 'POST',
						url: 'http://localhost:8849/EXOnline/font/teacher?method=add&tname=胶皮&workyears=1&direction=开心快乐&email=123@qq.com&phone=131231241232&direction=java方向',
						contentType: false,
						processData: false,
						//data: formData,
						contentType: 'application/json', // 设置内容类型为 JSON
						success: function(res) {
							console.log('表单数据发送成功:', res);
						},
						error: function(error) {
							console.log('表单数据发送错误:', error);
						}
					});
				});
			});
		</script>

	</body>

</html>